<template>
  <div class="field">
    <label for="name" class="label" style="text-align:left;">{{ name }}</label>
    <div class="control">
      <input
        :type="type"
        :id="name"
        @input="handleInput"
        :value="modelValue"
        class="input"
      />
    </div>
    <p class="help is-danger" v-if="error">{{error}}</p>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "FormInput",
  props: {
    type: {
      type: String,
      default: "text",
    },
    name: {
      type: String,
      required: true,
    },
    modelValue: {
      type: String
    },
    error:{
        type:String
    }
  },
  setup(props,ctx) {
      const handleInput=(event:any) => {
        console.log(event.target.value)
          ctx.emit("update:modelValue",event.target.value)
      }
      return {handleInput}
  },
});
</script>